<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Modal } from '@arco-design/web-vue'
import api from '@/api'

const $route = useRoute()
const $router = useRouter()

const plan_id = $route.query.plan_id
// const title = ref('')

const data = ref([])

const goBack = () => {
  $router.go(-1)
}

const getTemplates = async () => {
  const res = await api.get(`/recruit/planTemplateDetails?plan_id=${plan_id}`)
  data.value = res.data
}

getTemplates()
</script>

<template>
  <div class="page">
    <div class="header">招聘模板查看</div>

    <div class="record_body">
      <div class="form_body" v-for="(temp, index) in data" :key="index">
        <div class="form_body_title tac">第{{ temp.number }}轮评审表</div>
        <div>
          <div class="flex">
            <div class="table_name">岗位画像配置</div>
            <div class="table_body">
              <a-table
                :data="temp.content"
                :pagination="false"
                :bordered="{ headerCell: true, cell: true }"
              >
                <template #columns>
                  <a-table-column
                    title="板块"
                    align="center"
                    data-index="plate_name"
                  >
                    <template #cell="{ record, rowIndex }">
                      <div class="flex at_c">
                        <a-input readonly v-model="record.plate_name" />
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="问题"
                    align="center"
                    data-index="problem"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea readonly v-model="item.problem" auto-size />
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="考核要点"
                    align="center"
                    data-index="examine"
                  >
                    <template #cell="{ record }">
                      <div
                        class="diytd"
                        v-for="(item, index) in record.son"
                        :key="index"
                      >
                        <a-textarea readonly v-model="item.examine" auto-size />
                      </div>
                    </template>
                  </a-table-column>
                  <a-table-column title="分值" align="center">
                    <a-table-column
                      title="普通"
                      align="center"
                      :width="70"
                      data-index="ordinary"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c">{{ item.ordinary }}</div>
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="良好"
                      align="center"
                      :width="70"
                      data-index="good"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c">{{ item.good }}</div>
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="优秀"
                      align="center"
                      :width="70"
                      data-index="excellent"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <div class="h32 jc_c">{{ item.excellent }}</div>
                        </div>
                      </template>
                    </a-table-column>
                  </a-table-column>
                </template>
              </a-table>
            </div>
          </div>
          <div class="table_bottom">
            <div class="name">合计</div>
            <div style="flex: 1">板块：{{ temp.content.length }}</div>
            <div style="flex: 1">问题：{{ temp.problem_number }}</div>
            <div style="flex: 1">总分：{{ temp.score }}</div>
          </div>
        </div>

        <!-- <div class="flex jc_e mt30">
                    <a-space>
                        <a-button @click="goBack" type="primary" status="danger">返回</a-button>
                        <a-button type="primary">确认发布</a-button>
                    </a-space>
                </div> -->
      </div>
    </div>

    <a-affix :offsetBottom="0">
      <div class="page_bottom">
        <a-space>
          <a-button @click="goBack" type="primary" status="danger"
            >返回</a-button
          >
        </a-space>
      </div>
    </a-affix>
  </div>
</template>

<style scoped>
.page {
  height: 95%;
  border-bottom: 0;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

:deep(.arco-table-cell):has(.diytd) {
  padding: 0;
}

:deep(.arco-table-cell):has(.diytd) .diytd {
  padding: 0.6rem 1.06667rem;
  border-bottom: 1px solid #ddd;
}

:deep(.arco-table-cell):has(.diytd) .diytd:last-child {
  border: none;
}

.h32 {
  height: 32px;
  display: flex;
  align-items: center;
}

.record_body {
  box-sizing: border-box;
  padding: 20px 24px;
}

.form_body {
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
  margin-bottom: 20px;
}

.form_body_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.table_name {
  width: 100px;
  box-sizing: border-box;
  padding: 0 40px;
  font-size: 14px;
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e6eb;
}

.table_body {
  width: 100%;
}

.table_bottom {
  display: flex;
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e6eb;
}

.table_bottom > div {
  box-sizing: border-box;
  padding: 0.6rem 1.06667rem;
  text-align: center;
}

.table_bottom > div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.table_bottom .name {
  width: 100px;
}

.page_bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
}

.circle_cell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #819a59;
  box-sizing: border-box;
}

.circle_cell_green {
  background-color: #95f204;
}
</style>
